<template>
    <!-- 弹出层 -->
    <van-popup  closeable close-icon="close" round>
            <div class="popBox">
                <img src="/img/detailPic.jpg" alt="">

                <!-- 配置咖啡 -->
                <div class="configCof" @click="getType($event)">
                    <van-row>
                        <van-col span="6">
                            <p>规格</p>
                        </van-col>
                        <van-col span="6">
                            <div class="configBox active">大</div>
                        </van-col>
                    </van-row>

                    <van-row v-for="(rules,rows) in popupArr" :key="rows">
                        <van-col span="6">
                            <p>{{rules.name}}</p>
                        </van-col>
                        <van-col span="6" v-for="(item, index) in rules.children" :key="index">
                            <div class="configBox"  :class="{ 'active': rules.row == index }" @click="rules.row = index">{{ item }}</div>
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col span="6">
                            <p>加料</p>
                        </van-col>
                        <van-col span="6" @click="herb = !herb">
                            <div class="configBox" :class="{ 'active': herb }" ref="herbDom">香草3元</div>
                        </van-col>
                        <van-col span="6" @click="hazel = !hazel">
                            <div class="configBox" :class="{ 'active': hazel }">榛子3元</div>
                        </van-col>
                    </van-row>
                </div>

                <!-- 加入购物车 -->
                <div class="configGoods">
                    <div class="left">
                        ￥{{ props.popPrice }}
                        <p>{{popGoods}}+{{ props.popPrice }} + {{addArr.join('+')}} {{ herb ? "+香菜" : '' }}
                            {{ hazel ? "+榛子" : '' }}</p>
                    </div>
                    <van-stepper v-model="stepperNum" theme="round" button-size="22" disable-input />
                </div>


                <!-- 底部 -->
                <van-tabbar v-model="active">
                    <!-- <van-icon name="coupon-o" /> -->
                    <van-button icon="coupon-o" type="primary" class="btn1">买2赠1</van-button>
                    <van-button icon="like-o" type="primary" class="btn2" @click="colSucess">收藏口味</van-button>
                    <van-button icon="cart-o" type="primary" class="btn3" @click="toCart(popProId)">加入购物车</van-button>
                    <!-- to="/cart"   :to="{path:'/cart',query:{}}" -->
                </van-tabbar>

            </div>
        </van-popup>
</template>

<script setup>
import { defineProps,ref } from 'vue';

// 引入hooks
import {usePopup} from '../../hooks/useGoodsList'

// 获取父组件传来的价格
const props = defineProps(['popPrice','popGoods','popConfig','popProId'])


//toCart
const {popupArr,herb,hazel,addArr,getType,configArr,stepperNum,toCart,colSucess,active} = usePopup()





</script>

<style lang="scss" scoped>
    // 弹出层样式
    .van-popup {
    .popBox {
        height: 580px;
        width: 335px;
        border-radius: 8px;
        // background-color: pink;

        img {
            width: 336px;
            height: 150px;
            border-radius: 8px;
        }

        .van-row {
            height: 30px;
            // background-color: #88afd5;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            padding: 5px 0;

            p {
                color: #383838;
            }

            .configBox {
                width: 75px;
                height: 30px;
                background-color: #fff;
                border: 1px solid #ccc0b4;
                border-radius: 15px;
                color: #ccc0b4;
            }

            .active {
                background-color: #ccc0b4;
                color: #fff;
            }
        }

        .configGoods {
            width: 325px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            bottom: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            color: rgba(80, 80, 80, 1);
            border-top: 1px solid #f2f2f2;
            border-bottom: 1px solid #f2f2f2;

            .left {
                font-size: 18px;

                p {
                    font-size: 10px;
                    width: 230px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

            }
        }

        .van-tabbar {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .van-button {
                padding: 0;
                width: 90px;
                height: 32px;
                font-size: 12px;
                // --van-button-primary-background:#fff;
                border: none;
            }

            .btn1 {
                background-color: #ff8102;
            }

            .btn3 {
                background-color: #6488afd5;
            }

            .btn2 {
                background-color: #88afd5;
            }
        }


    }

}
</style>